import * as echarts from '../../../../utils/echarts.js';

let chart = null;

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    angleAxis: {
      show: false,
      max: 100 * 360 / 270, //-45度到225度，二者偏移值是270度除360度
      type: 'value',
      startAngle: 225, //极坐标初始角度
      splitLine: {
        show: false
      }
    },
    barMaxWidth: 14, //圆环宽度
    radiusAxis: {
      show: false,
      type: 'category',
    },
    //圆环位置和大小
    polar: {
      center: ['50%', '50%'],
      radius: '215'
    },
    series: [{
        type: 'bar',
        data: [{ //上层圆环，显示数据
          value: 75,
          itemStyle: {
            color: { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1, //从左到右 0-1
              y2: 0,
              colorStops: [{
                offset: 0,
                // color: '#D1E4FE'
                color: '#5F77F8',
              }, {
                offset: 1,
                // color: '#F9FFFE'
                color: '#5F77F8',
              }],
            },
          },
        }],
        barGap: '-100%', //柱间距离,上下两层圆环重合
        coordinateSystem: 'polar',
        roundCap: true, //顶端圆角
        z: 2 //圆环层级，同zindex
      },
      { //下层圆环，显示最大值
        type: 'bar',
        data: [{
          value: 100,
          itemStyle: {
            // color: '#80B8FF'
            color: '#F6F7FA',
          }
        }],
        barGap: '-100%',
        coordinateSystem: 'polar',
        roundCap: true,
        z: 1
      },
      //仪表盘
      {
        name: 'AQI',
        type: 'gauge',
        startAngle: 225, //起始角度，同极坐标
        endAngle: -45, //终止角度，同极坐标
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLabel: {
          show: false
        },
        pointer: {
          show: false
        },
        title: {
          offsetCenter: [0, 10],
          // color: '#FFFFFF',
          color: '#292928',
          fontSize: 41,
          fontWeight: 600,
          lineHeight: 58,
          rich: {
            a: {
              fontWeight: 'normal',
              fontSize: 16,
              // color: '#FFF',
              color: '#A8A8A8',
              padding: [40, 0, 0, 0]
            }
          }
        },
        detail: {
          show: false,
        },
        data: [{
          // value: 0,
          name: 75 + '%' + '\n' + '{a|' + '消耗成本占比' + '}'
        }]
      }
    ]
  }

  chart.setOption(option);
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () {},
      fail: function () {}
    }
  },
  data: {
    ec: {
      onInit: initChart
    }
  },

  onReady() {
    setTimeout(function () {
      // 获取 chart 实例的方式
      // console.log(chart)
    }, 2000);
  }
});